<%--
  Created by IntelliJ IDEA.
  User: 少宇
  Date: 2022/8/3
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Insert title here</title>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        /* 还有一种方式老师没有说，直接加上
        *   "traditional":true,
        *   就可以避免 数组名字是 array 然后获取的时候名字变成 array[] 的问题
        * */
        $(function () {
            $("#btn1").click(function () {
                $.ajax({
                    "url": "send/array/one.html",           // 请求目标资源地址
                    "type": "post",                         // 请求方式
                    "data": {                               // 要发送的请求
                        "array": [5, 8, 12]
                    },
                    "dataType": "text",                     // 如何对待服务器端返回的数据
                    "success": function (response) {        // 服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {          //  服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                });
            });
            $("#btn2").click(function () {
                $.ajax({
                    "url": "send/array/two.html",           // 请求目标资源地址
                    "type": "post",                         // 请求方式
                    "data": {                               // 要发送的请求
                        "array[0]": 5,
                        "array[1]": 8,
                        "array[2]": 12
                    },
                    "dataType": "text",                     // 如何对待服务器端返回的数据
                    "success": function (response) {        // 服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {          //  服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                });
            });

            $("#btn3").click(function () {

                //  准备好要发送服务器端的数据
                var array = [5, 8, 12];

                // 将JSON数组转换为JSON字符串
                var requestBody = JSON.stringify(array);

                $.ajax({
                    "url": "send/array/three.html",         // 请求目标资源地址
                    "type": "post",                         // 请求方式
                    "data": requestBody,                    // 请求头
                    "contentType": "application/json;charset=UTF-8",     // 请求体的内容类型，告诉服务端本次请求体的数据是JSON数据
                    "dataType": "text",                     // 如何对待服务器端返回的数据
                    "success": function (response) {        // 服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {          //  服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                });
            });

            $("#btn4").click(function () {
                // 准备要发送的数据
                var student = {
                    "stuId": 5,
                    "stuName": "tom",
                    "address": {
                        "province": "广东",
                        "city": "深圳",
                        "street": "后端"
                    },
                    "schoolList": [
                        {
                            "schoolName": "JavaSE",
                            "schoolSize": 100
                        }, {
                            "schoolName": "SSM",
                            "schoolSize": 99
                        }
                    ],
                    "map": {
                        "k1": "v1",
                        "k2": "v2"
                    }
                };

                // 将JSON对象转换为JSON字符串
                var requestBody = JSON.stringify(student);
                // 发送Ajax请求
                $.ajax({
                    "url": "send/compose/object.json",
                    "type": "post",
                    "data": requestBody,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        alert(response);
                        console.log(response);
                    },
                    "error": function (response) {
                        alert(response);
                        console.log(response);
                    }
                });
            });
            $("#btn5").click(function () {
                /*alert("alert...");*/
                layer.msg("layer的弹窗！");
            });
        });
    </script>
</head>
<body>
<a href="test/ssm.html">测试ssm整合框架</a><br>
<br>
<br>
<button id="btn1">Send [5、8、12] One</button>
<br>
<br>
<button id="btn2">Send [5、8、12] Two</button>
<br>
<br>
<button id="btn3">Send [5、8、12] Three</button>
<br>
<br>
<button id="btn4">Send Compose Object</button>
<br>
<br>
<button id="btn5">点我弹窗</button>
</body>
</html>
